<template>
  <van-nav-bar :title="t('shelve.boxShelve')" left-arrow @click-left="onClickLeft" placeholder fixed />
  <div v-if="showSn == 1">
    <van-cell-group>
      <van-row v-if="!loading" gutter="10" class="van-cell van-cell--center">
        <van-col span="18">
          <van-row class="van-cell__title">{{ t('shelve.orderNo') + orderInfo.orderNo }}</van-row>
          <van-row class="van-cell__label">{{ t('shelve.customer') + orderInfo.customerCodeAndName }}</van-row>
        </van-col>
        <van-col span="6" class="van-cell__value">
          <span>{{ orderInfo.shelfStockingBoxNum + '/' + (orderInfo.shelfStockingBoxNum + orderInfo.receiptBoxNum) }}</span>
        </van-col>
      </van-row>
    </van-cell-group>
    <van-field ref="boxNoRef" v-model="boxNo" size="large" @keydown.enter="handleScanBox" :placeholder="t('shelve.pleaseScanBoxNo')" clearable>
      <template #left-icon>
        <van-icon name="enlarge" size="1.5rem" class="px-2"/>
      </template>
    </van-field>
    <van-cell-group class="p-2">
      <van-empty v-if="finished && orderInfo.orderInfoBoxDTOList?.length <= 0" :description="t('shelve.allShelve')"/>
      <van-list v-if="showSn == 1" v-model:loading="loading" :finished="finished" :loading-text="t('loading')" @load="onLoad" >
        <van-cell v-for="(item, i) in orderInfo.orderInfoBoxDTOList" :key="i" :title="t('shelve.boxNo') + item.boxNo" @click="showDetail(item)">
          <template #label>
            <van-row gutter="10">
              <van-col span="12">{{ t('shelve.shelved') + item.shelfStockingSkuNum }}</van-col>
              <van-col span="12" class="text-right">{{ t('shelve.inbounded') + item.receiptSkuNum }}</van-col>
            </van-row>
          </template>
        </van-cell>
      </van-list>
    </van-cell-group>
  </div>
  <div v-if="showSn == 2">
    <van-cell-group>
      <van-cell center>
        <template #title>
          <van-row>{{ t('shelve.orderNo') + orderInfo.orderNo }}</van-row>
          <van-row>{{ t('shelve.boxNo') + currentBox.boxNo }}</van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <van-field :label="t('shelve.locationCode')" name="locationCode" required label-align="top">
      <template #input>
        <van-field ref="locationCodeRef" v-model="currentBox.locationCode" :placeholder="t('shelve.pleaseScanLocation')" clearable class="input-border">
          <template #left-icon>
            <van-icon name="enlarge" size="1.5rem" class="pr-2"/>
          </template>
        </van-field>
      </template>
    </van-field>
    <van-action-bar placeholder>
      <van-row gutter="10" class="w-full p-1">
        <van-col span="12">
          <van-button class="text-base" block plain @click="showSn -= 1">{{ t('cancel') }}</van-button>
        </van-col>
        <van-col span="12">
          <van-button class="text-base" :loading="confirmLoading" block type="primary" @click="confirmShelve">{{ t('shelve.shelveConfirm') }}</van-button>
        </van-col>
      </van-row>
    </van-action-bar>
  </div>
  <van-back-top />
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { postRequest, scanSuccess, scanFail } from "@/api";
import { useRoute } from "vue-router";
import { AppToast } from "@/utils/appToast";

const query = useRoute().query;
const { t } = useI18n();
const onClickLeft = () => {
  showSn.value -= 1
  nextTick(() => boxNoRef.value.focus())
  if(!showSn.value) {
    history.back();
  }
}
const showSn = ref(1);
const loading = ref(false);
const confirmLoading = ref(false);
const finished = ref(false);
const orderInfo: any = ref({});
const boxNo = ref();
const boxNoRef = ref();
const locationCodeRef = ref();

const currentBox = ref();

onMounted(() => {
  boxNoRef.value.focus()
});

const onLoad = () => {
  postRequest("/orderInfo/getShelvedOrderInfoByNo", { number: query.orderNo }).then(res => {
    res.data.orderInfoBoxDTOList = res.data.orderInfoBoxDTOList.filter(box => box.boxStatus === 1)
    orderInfo.value = res.data;
  }).finally(() => {
    loading.value = false;
    finished.value = true;
  })
};

const handleScanBox = () => {
  const box = orderInfo.value.orderInfoBoxDTOList.find(item => item.boxNo.toLowerCase() === boxNo.value.toLowerCase())
  if (box) {
    scanSuccess()
    currentBox.value = box
    showDetail(box)
  } else {
    scanFail();
  }
  boxNo.value = null
};

const showDetail = (box) => {
  showSn.value = 2;
  currentBox.value = box;
  nextTick(() => locationCodeRef.value.focus())
}

const validateBox = (box: any) => {
  return box.locationCode
}

const confirmShelve = () => {
  confirmLoading.value = true
  const request = {
    fromTerminal: 1,
    orderId: orderInfo.value.orderId,
    orderInfoForShelveList: []
  }
  if (!validateBox(currentBox.value)) {
    AppToast(t("pleaseCheckRequired"), "danger", true);
    confirmLoading.value = false
    return
  }
  request.orderInfoForShelveList.push({
    boxId: currentBox.value.boxId,
    locationCode: currentBox.value.locationCode
  })
  postRequest('/orderInfo/updateOrderInfoForShelve', request).then(() => {
    AppToast(t("shelve.shelveSuccess"), "success")
    orderInfo.value.orderInfoBoxDTOList.splice(orderInfo.value.orderInfoBoxDTOList.indexOf(currentBox.value), 1);
    showSn.value = 1
    nextTick(() => boxNoRef.value.focus())
  }).finally(() => {
    confirmLoading.value = false
  })
}
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-collapse-item__content) {
  padding: 0;
}

:deep(.input-border) {
  border: 1px solid #e5e7eb;
}
</style>
